<template>
  <div class="register-page">
    <LoginBanner />
    <VanForm @submit="onSubmit">
      <van-field
        label="手机号"
        label-align="top"
        :rules="[{ required: true, message: '请输入手机号' }]"
        autocomplete="username"
        v-model="username"
        placeholder="请输入手机号"
      />
      <van-field
        label="验证码"
        label-align="top"
        :rules="[{ required: true, message: '请输入验证码' }]"
        v-model="code"
        autocomplete="off"
        placeholder="请输入验证码"
      >
        <template #button>
          <BaseText is-primary @click="send" v-show="!isSend">
            发送验证码
          </BaseText>
          <van-count-down
            ref="countDown"
            v-show="isSend"
            :time="time"
            format="ss"
            @finish="onFinish"
          >
            <template #default="timeData">
              <BaseText is-primary>{{ timeData.seconds }}后重发</BaseText>
            </template>
          </van-count-down>
        </template>
      </van-field>
      <van-field
        label="密码"
        label-align="top"
        type="password"
        :rules="[{ required: true, message: '请输入密码' }]"
        v-model="password"
        autocomplete="off"
        placeholder="请输入密码"
      />
      <van-field
        label="再次确认密码"
        label-align="top"
        type="password"
        :rules="[{ required: true, message: '请再次输入密码' }]"
        v-model="nextPassword"
        autocomplete="off"
        placeholder="请再次输入密码"
      />

      <van-field
        label="邀请码"
        label-align="top"
        type="invitationCode"
        v-model="invitationCode"
        placeholder="邀请码非必填"
      />

      <BaseSection class="rigister-page__footer">
        <AgreeCheck v-model="check" />
        <VanButton block native-type="submit">免费注册</VanButton>
        <ToolTop>
          <span @click="onGoHome">&lt; 首页</span>
          <span @click="toLogin">登录 &gt;</span>
        </ToolTop>
      </BaseSection>
    </VanForm>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { showSuccessToast, showFailToast } from "vant";
import router from "../../router";
// import { appRegister, getVerificationCode } from "@/api/authApi.js";
import LoginBanner from "./modules/LoginBanner.vue";
import ToolTop from "./modules/ToolTip.vue";
import AgreeCheck from "./modules/AgreeCheck.vue";
const password = ref("");
const nextPassword = ref("");
const username = ref("");
const code = ref("");
const invitationCode = ref("");

const countDown = ref();
const time = ref(70 * 1000);
let isSend = ref(false);
const check = ref(true);

//发送验证码
async function send() {
  if (!isMobile(username.value)) {
    return showFailToast("手机号码格式错误!");
  }
  // await getVerificationCode(username.value);
  isSend.value = true;
  countDown.value.start();
  showSuccessToast("发送成功！");
}
const isMobile = (v) => {
  return /^1[3|4|5|6|7|8|9][0-9]\d{8}$/.test(v);
};
const onFinish = () => {
  isSend.value = false;
  countDown.value.reset();
};
const onSubmit = async (values) => {
  console.log("submit", values);
  if (password.value !== nextPassword.value) {
    return showFailToast("两次密码不一致！");
  }
  // await appRegister({
  //   username: username.value,
  //   password: password.value,
  //   code: code.value,
  //   invitationCode: invitationCode.value,
  // });
  showSuccessToast("注册成功！");

  setTimeout(() => {
    router.push("/login");
  }, 1500);
};

const toLogin = () => {
  router.push("/login");
};

const onGoHome = () => {
  router.push({
    name: "home",
  });
};
</script>

<style scoped lang="scss">
.rigister-page {
  &__footer {
    margin-top: var(--dx-gap-xl);
  }
}
</style>
